<template>
  <div class="背景">
    <div class="页眉">
    </div>
    <el-row :gutter="16" type="flex" justify="center">
      <el-col :span="4">
        <div class="文本框" style="height: 800px;">
          <!-- <div class="标题">
            富吾财经
          </div>
          <br/>
          <el-menu router>
            <el-menu-item index="/" >
              <div class="小标题">
                富头条
              </div>
            </el-menu-item>
            <el-menu-item index="/Video" >
              <div class="小标题">
                视频
              </div>
            </el-menu-item>
            <el-menu-item index="/Live" >
              <div class="小标题">
                直播
              </div>
            </el-menu-item>
            <el-menu-item index="/" >
              <div class="小标题">
                资讯
              </div>
            </el-menu-item>
            <el-menu-item index="/CreationCenter" >
              <div class="小标题">
                富吾号
              </div>
            </el-menu-item>
            <el-menu-item index="/" >
              <div class="小标题">
                关于我们
              </div>
            </el-menu-item>
          </el-menu> -->

      <side-bar>
      </side-bar>


        </div> 



      </el-col>
      <el-col :span="12">
        <div class="文本框">
          <el-row>
            <el-col :span="12">
              <div style="font-size: large">正在直播</div></el-col>
            <el-col :span="12" >
              <a style="font-size: xx-small;float:right;text-align: right"  href="https://www.runoob.com/try/try.php?filename=trycss_link" target="_blank">更多</a>
            </el-col>
            <el-col>
              <div style="font-size:xx-small;color:#C0C0C0">当前正在直播人数：123</div>
            </el-col>
          <el-col >
            <div class="img">
              <a target="_blank" href="http://localhost:8080/about">
                <img class="zhibofengmian" src="//static.runoob.com/images/demo/demo2.jpg" alt="图片文本描述" width="300" height="200">
              </a>
              <div class="desc">
                <a href="https://sm.ms/image/sq87LvMzobDU5ch" target="_blank">
                  <img class="headimg" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"></a>
                <span class="guankanrenshu">
                  <i class="el-icon-user-solid"></i>
                  观看人数：
                </span>
                <div class="小窗用户名">
                  王宏涛
                </div>
                <div class="小窗房间位置">
                 今天我直播弹唱《夏天的风》快来看
                </div>
              </div>
            </div>
            <div class="img">
              <a target="_blank" href="http://localhost:8080/#/about">
                <img class="zhibofengmian" src="//static.runoob.com/images/demo/demo2.jpg" alt="图片文本描述" width="300" height="200">
              </a>
              <div class="desc">
                <a href="https://sm.ms/image/sq87LvMzobDU5ch" target="_blank">
                  <img class="headimg" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"></a>
                <span class="guankanrenshu">
                  <i class="el-icon-user-solid"></i>
                  观看人数：
                </span>
                <div class="小窗用户名">
                  王宏涛
                </div>
                <div class="小窗房间位置">
                  今天我直播弹唱《夏天的风》快来看
                </div>
              </div>
            </div>
            <div class="img">
              <a target="_blank" href="http://localhost:8080/#/about">
                <img class="zhibofengmian" src="//static.runoob.com/images/demo/demo2.jpg" alt="图片文本描述" width="300" height="200">
              </a>
              <div class="desc">
                <a href="https://sm.ms/image/sq87LvMzobDU5ch" target="_blank">
                  <img class="headimg" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"></a>
                <span class="guankanrenshu">
                  <i class="el-icon-user-solid"></i>
                  观看人数：
                </span>
                <div class="小窗用户名">
                  王宏涛
                </div>
                <div class="小窗房间位置">
                  今天我直播弹唱《夏天的风》快来看
                </div>
              </div>
            </div>
            <div class="img">
              <a target="_blank" href="http://localhost:8080/#/about">
                <img class="zhibofengmian" src="//static.runoob.com/images/demo/demo2.jpg" alt="图片文本描述" width="300" height="200">
              </a>
              <div class="desc">
                <a href="https://sm.ms/image/sq87LvMzobDU5ch" target="_blank">
                  <img class="headimg" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"></a>
                <span class="guankanrenshu">
                  <i class="el-icon-user-solid"></i>
                  观看人数：
                </span>
                <div class="小窗用户名">
                  王宏涛
                </div>
                <div class="小窗房间位置">
                  今天我直播弹唱《夏天的风》快来看
                </div>
              </div>
            </div>
            <div class="img">
              <a target="_blank" href="http://localhost:8080/#/about">
                <img class="zhibofengmian" src="//static.runoob.com/images/demo/demo2.jpg" alt="图片文本描述" width="300" height="200">
              </a>
              <div class="desc">
                <a href="https://sm.ms/image/sq87LvMzobDU5ch" target="_blank">
                  <img class="headimg" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"></a>
                <span class="guankanrenshu">
                  <i class="el-icon-user-solid"></i>
                  观看人数：
                </span>
                <div class="小窗用户名">
                  王宏涛
                </div>
                <div class="小窗房间位置">
                  今天我直播弹唱《夏天的风》快来看
                </div>
              </div>
            </div>
            <div class="img">
            <a target="_blank" href="http://localhost:8080/#/about">
              <img class="zhibofengmian" src="//static.runoob.com/images/demo/demo2.jpg" alt="图片文本描述" width="300" height="200">
            </a>
            <div class="desc">
              <a href="https://sm.ms/image/sq87LvMzobDU5ch" target="_blank">
                <img class="headimg" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"></a>
              <span class="guankanrenshu">
                  <i class="el-icon-user-solid"></i>
                  观看人数：
                </span>
              <div class="小窗用户名">
                王宏涛
              </div>
              <div class="小窗房间位置">
                今天我直播弹唱《夏天的风》快来看
              </div>
            </div>
          </div>
            <div class="img">
              <a target="_blank" href="http://localhost:8080/#/about">
                <img class="zhibofengmian" src="//static.runoob.com/images/demo/demo2.jpg" alt="图片文本描述" width="300" height="200">
              </a>
              <div class="desc">
                <a href="https://sm.ms/image/sq87LvMzobDU5ch" target="_blank">
                  <img class="headimg" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"></a>
                <span class="guankanrenshu">
                  <i class="el-icon-user-solid"></i>
                  观看人数：
                </span>
                <div class="小窗用户名">
                  王宏涛
                </div>
                <div class="小窗房间位置">
                  今天我直播弹唱《夏天的风》快来看
                </div>
              </div>
            </div>
            <div class="img">
              <a target="_blank" href="http://localhost:8080/#/about">
                <img class="zhibofengmian" src="//static.runoob.com/images/demo/demo2.jpg" alt="图片文本描述" width="300" height="200">
              </a>
              <div class="desc">
                <a href="https://sm.ms/image/sq87LvMzobDU5ch" target="_blank">
                  <img class="headimg" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"></a>
                <span class="guankanrenshu">
                  <i class="el-icon-user-solid"></i>
                  观看人数：
                </span>
                <div class="小窗用户名">
                  王宏涛
                </div>
                <div class="小窗房间位置">
                  今天我直播弹唱《夏天的风》快来看
                </div>
              </div>
            </div>
          </el-col>
          </el-row>
        </div>
        <div class="文本框">
          <el-row>
            <el-col :span="12">
              <div style="font-size: large">直播预告</div></el-col>
            <el-col>
              <div class="img" style="width:90%">
                <a target="_blank" href="//static.runoob.com/images/demo/demo2.jpg">
                  <img class="zhibofengmian" src="//static.runoob.com/images/demo/demo2.jpg" alt="图片文本描述" style="width:40%;float:left;height:100%">
                </a>
                <div class="desc" style="float:right">

                </div>
                <div class="大窗主题"><b>直播 |</b>
                  今天是我直播哦
                </div>
                <div class="大窗内容">
                  我要尤克里里弹唱《夏天的风》快来支持我吧
                </div>
                <div class="开播时间">
                  播出时间：2021-05-21 14：00
                </div>
              </div>
              <div class="img" style="width:90%">
                <a target="_blank" href="//static.runoob.com/images/demo/demo2.jpg">
                  <img class="zhibofengmian" src="//static.runoob.com/images/demo/demo2.jpg" alt="图片文本描述" style="width:40%;float:left;height:100%">
                </a>
                <div class="desc" style="float:right">

                </div>
                <div class="大窗主题"><b>直播 |</b>
                  今天是我直播哦
                </div>
                <div class="大窗内容">
                  我要尤克里里弹唱《夏天的风》快来支持我吧
                </div>
                <div class="开播时间">
                  播出时间：2021-05-21 14：00
                </div>
              </div>
              <div class="img" style="width:90%">
                <a target="_blank" href="//static.runoob.com/images/demo/demo2.jpg">
                  <img class="zhibofengmian" src="//static.runoob.com/images/demo/demo2.jpg" alt="图片文本描述" style="width:40%;float:left;height:100%">
                </a>
                <div class="desc" style="float:right">

                </div>
                <div class="大窗主题"><b>直播 |</b>
                  今天是我直播哦
                </div>
                <div class="大窗内容">
                  我要尤克里里弹唱《夏天的风》快来支持我吧
                </div>
                <div class="开播时间">
                  播出时间：2021-05-21 14：00
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="文本框">
          <el-row>
            <el-col :span="12">
              <div style="font-size: large">热播回放</div></el-col>
            <el-col>
              <div class="img" style="width:90%">
                <a target="_blank" href="//static.runoob.com/images/demo/demo2.jpg">
                  <img class="zhibofengmian" src="//static.runoob.com/images/demo/demo2.jpg" alt="图片文本描述" style="width:40%;float:left;height:100%">
                </a>
                <div class="desc" style="float:right">

                </div>
                <div class="大窗主题"><b>直播 |</b>
                  今天是我直播哦
                </div>
                <div class="大窗内容">
                  我要尤克里里弹唱《夏天的风》快来支持我吧
                </div>
                <div class="开播时间">
                  播出时间：2021-05-21 14：00
                </div>
              </div>
              <div class="img" style="width:90%">
                <a target="_blank" href="//static.runoob.com/images/demo/demo2.jpg">
                  <img class="zhibofengmian" src="//static.runoob.com/images/demo/demo2.jpg" alt="图片文本描述" style="width:40%;float:left;height:100%">
                </a>
                <div class="desc" style="float:right">

                </div>
                <div class="大窗主题"><b>直播 |</b>
                  今天是我直播哦
                </div>
                <div class="大窗内容">
                  我要尤克里里弹唱《夏天的风》快来支持我吧
                </div>
                <div class="开播时间">
                  播出时间：2021-05-21 14：00
                </div>
              </div>
              <div class="img" style="width:90%">
                <a target="_blank" href="//static.runoob.com/images/demo/demo2.jpg">
                  <img class="zhibofengmian" src="//static.runoob.com/images/demo/demo2.jpg" alt="图片文本描述" style="width:40%;float:left;height:100%">
                </a>
                <div class="desc" style="float:right">

                </div>
                <div class="大窗主题"><b>直播 |</b>
                  今天是我直播哦
                </div>
                <div class="大窗内容">
                  我要尤克里里弹唱《夏天的风》快来支持我吧
                </div>
                <div class="开播时间">
                  播出时间：2021-05-21 14：00
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>

      <el-col :span="6">
        <div class="文本框">
          <el-row>
            <el-col :span="20">
              <el-input placeholder="搜索站内资讯、视频或用户" v-model="search" prefix-icon="el-icon-search"></el-input>
            </el-col>
            <el-col :span="4">
              <el-button type="primary">搜索</el-button>
            </el-col>
          </el-row>
        </div>
        <div class="文本框" style="padding: 40px;">
          <el-tabs v-model="isLogin" ref="tabs">
            <el-tab-pane label="未登录" name="0">
              <div class="文本 居中">
                登录后可以保存您的浏览喜好、评论、收藏，并与APP同步，更可以发布富头条、视频与直播
              </div>
              <br/>
              <div class="居中" >
                <el-button type="primary" style="width:80%;" @click="toLogin">登录</el-button>
              </div>
            </el-tab-pane>
            <el-tab-pane label="已登录" name="1">
              <el-row>
                <el-col :span="8"><el-avatar :size="80" :src=useravatar></el-avatar></el-col>
                <el-col :span="16">
                  <div class="文本-标题">{{nickname}} </div>
                  <div class="文本-小-宽间距">{{ userarticleandfuheadlinenumbers }} 文章 {{ uservideonumbers }} 视频</div>
                  <div class="文本-小-宽间距">{{ userthumbups }} 获赞 {{ userfollows }} 关注 {{ userfollowers }} 粉丝</div>
                  <el-button type="text" @click="logout">退出登录</el-button>
                  <el-button type="text" @click="myinfo">直播个人主页</el-button>
                </el-col>
              </el-row>
            </el-tab-pane>
          </el-tabs>
        </div>
          <div>
            <div style="text-align: left;padding-bottom:2%">
              <h>为你推荐</h>
            </div>
            <div style="width:100%" id="banner">
              <!--动态将图片轮播图的容器高度设置成与图片一致-->
              <el-carousel :height="bannerHeight + 'px'" interval="5000" arrow="always">
                <!--遍历图片地址,动态生成轮播图-->
                <el-carousel-item v-for="item in imglist" :key="item">
                  <a href="https://sm.ms/image/sq87LvMzobDU5ch" target="_blank">
                    <img style="width:100%;height:auto" :src="item"></a>
                </el-carousel-item>
              </el-carousel>
            </div>
          </div>
        <div class="文本框">
          <div>
            <div  style="height: 500px;weight:100%">
              <div style="text-align: left;padding-bottom:2%">
                <h>回放热榜</h>
              </div>
              <div><el-tabs v-model="defaultActivePage_2">
                <el-tab-pane label="日榜" name="001">
                  <div v-for="o in 10" :key="o" style="padding-top: 6px;padding-bottom: 6px;">
                    <el-row>
                      <el-col :span="2">
                        <div class="文本-中">
                          {{ o }}
                        </div>
                      </el-col>
                      <el-col :span="3">
                        <div class="block"><el-avatar shape="square" :size="25" :src="squareUrl"></el-avatar></div>
                      </el-col>
                      <el-col :span="11">
                        <div class="文本-中">
                          {{ tableData[o-1].name }}
                        </div>

                      </el-col>
                      <el-col :span="8">
                        <div class="文本-中" style="text-align: right;">
                          {{ tableData[o-1].hot }}
                        </div>

                      </el-col>
                    </el-row>
                  </div>
                </el-tab-pane>
                <el-tab-pane label="周榜" name="002">
                  <div v-for="o in 5" :key="o" style="padding-top: 6px;padding-bottom: 6px;">
                    <el-row>
                      <el-col :span="2">
                        <div class="文本-中">
                          {{ o }}
                        </div>
                      </el-col>

                      <el-col :span="3">
                        <div class="block"><el-avatar shape="square" :size="25" :src="squareUrl"></el-avatar></div>
                      </el-col>

                      <el-col :span="11">
                        <div class="文本-中">
                          {{ tableData[o-1].name }}
                        </div>

                      </el-col>

                      <el-col :span="8">
                        <div class="文本-中" style="text-align: right;">
                          {{ tableData[o-1].hot }}
                        </div>

                      </el-col>
                    </el-row>
                  </div>
                </el-tab-pane>
                <el-tab-pane label="月榜" name="003">
                  <div v-for="o in 5" :key="o" style="padding-top: 6px;padding-bottom: 6px;">
                    <el-row>
                      <el-col :span="2">
                        <div class="文本-中">
                          {{ o }}
                        </div>
                      </el-col>

                      <el-col :span="3">
                        <div class="block"><el-avatar shape="square" :size="25" :src="squareUrl"></el-avatar></div>
                      </el-col>

                      <el-col :span="11">
                        <div class="文本-中">
                          {{ tableData[o-1].name }}
                        </div>

                      </el-col>

                      <el-col :span="8">
                        <div class="文本-中" style="text-align: right;">
                          {{ tableData[o-1].hot }}
                        </div>

                      </el-col>
                    </el-row>
                  </div>
                </el-tab-pane>
              </el-tabs></div>
            </div>
          </div>

        </div>

        <div class="文本框 居中">
          扫码下载富吾app
        </div>
        <div class="文本框">
          <div class="文本-中">
            友情链接
          </div>
          <el-tabs v-model="activeName">
            <el-tab-pane>
              <span slot="label" class="文本">综合</span>
            </el-tab-pane>
            <el-tab-pane>
              <span slot="label" class="文本">财经</span>
            </el-tab-pane>
            <el-tab-pane>
              <span slot="label" class="文本">银行</span>
            </el-tab-pane>
            <el-tab-pane>
              <span slot="label" class="文本">证券</span>
            </el-tab-pane>
            <el-tab-pane>
              <span slot="label" class="文本">保险</span>
            </el-tab-pane>
            <el-tab-pane>
              <span slot="label" class="文本">基金</span>
            </el-tab-pane>
            <el-tab-pane>
              <span slot="label" class="文本">房屋</span>
            </el-tab-pane>
            <el-tab-pane>
              <span slot="label" class="文本">收藏</span>
            </el-tab-pane>
          </el-tabs>
        </div>

      </el-col>
    </el-row>
    <div class="页眉"></div>
  </div>
</template>


<script>
import SideBar from '../FuHeadline/SideBar.vue';
export default {
  components: { SideBar },
  data(){
    return {
      search :'',
      isLogin: '',
      nickname: '',
      useravatar:"",
      userarticleandfuheadlinenumbers:"",
      uservideonumbers:"",
      userthumbups:"",
      userfollows:"",
      userfollowers:"",
      queryByUserId:{
        idUser: window.sessionStorage.getItem("idUser")
      },
      activeName:0,
      //头像
      defaultActivePage_1: '001',
      /*创作榜默认显示页*/
      defaultActivePage_2: '001',
      /*作品榜默认显示页*/
      defaultActivePage_3: '001',
      circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      imglist:[
        require('../assets/nene.jpg'),
        require('../assets/nene.jpg'),
        require('../assets/nene.jpg'),
      ],
      // 图片父容器高度
      bannerHeight :1000,
      // 浏览器宽度
      screenWidth :0,
      tableData: [
        {name:'gta5',hot:'1.1w'},
        {name:'gta5',hot:'1.1w'},
        {name:'gta5',hot:'1.1w'},
        {name:'gta5',hot:'1.1w'},
        {name:'gta5',hot:'1.1w'},
        {name:'gta5',hot:'1.1w'},
        {name:'gta5',hot:'1.1w'},
        {name:'gta5',hot:'1.1w'},
        {name:'gta5',hot:'1.1w'},
        {name:'gta5',hot:'1.1w'}],
      zaixianzhiborenshu:"123",
      idName:"淹死了一条鱼",
      liveTitle:"ysy可真是大美女",
      liveAbstract:"南开大学与深圳华大基因科技有限公司（以下简称华大）在八里台校区海冰楼正式签署“南开大学-华大基因联合研究中心”产学研合作协议，"
    }
  },
  created() {
    this.init()
  },
  methods:{
    setSize:function () {
      // 通过浏览器宽度(图片宽度)计算高度
      this.bannerHeight = 400 / 1920 * this.screenWidth;
    },
    toLogin(){
      this.$router.push("/Login");
    },
    logout() {
      window.sessionStorage.removeItem('idUser');
      this.init()
    },
    myinfo(){
      this.$router.push("/ks");
    },
    async init(){
      this.$nextTick(function () {
        this.$refs.tabs.$children[0].$refs.tabs[0].style.display="none";
      })
      this.$nextTick(function () {
        this.$refs.tabs.$children[0].$refs.tabs[1].style.display="none";
      })
      const token = window.sessionStorage.getItem("idUser");
      if(!token) {
        this.isLogin='0';
      }
      else {
        this.isLogin='1';
        const {data: res} = await this.$http.get('http://39.102.76.217:8082/getuserbasicinfobyid', {
          params:this.queryByUserId
        })
        this.nickname=res.nickname
        this.useravatar=res.useravatar
        this.userarticleandfuheadlinenumbers=res.userarticleandfuheadlinenumbers
        this.uservideonumbers=res.uservideonumbers
        this.userthumbups=res.userthumbups
        this.userfollows=res.userfollows
        this.userfollowers=res.userfollowers

      }
    }
  },
  mounted() {
    // 首次加载时,需要调用一次
    this.screenWidth =  window.innerWidth;
    this.setSize();
    // 窗口大小发生改变时,调用一次
    window.onresize = () =>{
      this.screenWidth =  window.innerWidth;
      this.setSize();
    }
  }
};
</script>
<style>
.article-content {
  float: left;
  width: 660px;
  margin: 0;
  padding: 0;
}
.h1 {
  font-size: 34px;
  font-weight: 700;
  line-height: 44px;
  color: #222;
}
.article-meta {
  margin: 12px 0 20px;
  font-size: 13px;
}
.original-tag{
  display: inline-block;
  padding: 2px;
  border: 1px solid #999;
  line-height: 12px;
  margin-right: 6px;
  color: #777;
}
.article-action{
  content: "";
  display: table;
  clear: both;
}
.comment-meta{
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: 700;
  color: #657180;
}
.input-area{

}
.comment-list{
  margin-top: 22px;
  border-top: 1px solid #f2f2f2;
  margin: 0;
  margin-top: 0px;
  padding: 0;
  box-sizing: border-box;
}
.comment-item{
  content: "";
  display: table;
  clear: both;
}
.文章标题 {
  font-weight: bold;
  font-size: 16px;
  font-family: "宋体";
}
/*菜单栏*/
.el-menu {
  border-right:0!important;
}
.el-menu {
  margin: 2px;
}
.标题 {
  font-size: 24px;
  text-align: center;
  color: red;
  margin-bottom: 8px;
  margin-top: 8px;
  font-weight: bold;
}
.小标题 {
  font-size: 16px;
  text-align: center;
  font-weight: bold;
  cursor: pointer;
}
.加粗 {
  font-weight: bold;
}
.背景 {
  background: #f8f7f7;
}
.页眉{
  height: 50px;
  background: #ffffff;
}
.文本框 {
  background: #ffffff;
  border-radius: 8px;
  min-height: 36px;
  padding: 20px;
  margin-bottom: 16px;
  margin-top: 16px;
}
.文本框-灰色 {
  background: #f8f7f7;
  border-radius: 8px;
  min-height: 36px;
  padding: 20px;
  margin-bottom: 16px;
  margin-top: 16px;
}
.文本框-灰色-无间距 {
  background: #f8f7f7;
  border-radius: 8px;
  min-height: 36px;
  padding: 20px;
}
.文本-小 {
  font-size: 12px;
  text-align: left;
}
.文本-小-宽间距 {
  font-size: 12px;
  text-align: left;
  margin-bottom: 5px;
}
.文本 {
  font-size: 14px;
  text-align: left;
}
.文本-中 {
  font-size: 16px;
  text-align: left;
}
.文本-大 {
  font-size: 18px;
  text-align: left;
}
.文本-主标题 {
  font-size: 22px;
  text-align: left;
  margin-top: 5px;
  margin-bottom: 5px;
  font-weight: bold;
}
.文本-巨型 {
  font-size: 26px;
  text-align: left;
  margin-top: 5px;
  margin-bottom: 5px;
}
.居中{
  text-align: center;
}
.右侧{
  text-align: right;
}
.卡片 {
  background: #f8f7f7;
  border-radius: 8px;
  min-height: 36px;
  padding-left: 30px;
  padding-right: 30px;
  padding-bottom: 20px;
  padding-top: 20px;
  margin-top: 8px;
}
.body {
  background: #f8f7f7;
}
.text {
  font-size: 14px;
  text-align: left;
}
.grid-content {
  background: #ffffff;
  border-radius: 8px;
  min-height: 36px;
  padding: 20px;
  margin-bottom: 16px;
  margin-top: 16px;
}
.grid-content-2 {
  background: #ffffff;
  border-radius: 8px;
  min-height: 36px;
  padding: 20px;
}
.grid-content-carousel {
  background: #ffffff;
  border-radius: 8px;
  min-height: 36px;
}
.text-card {
  font-size: 12px;
  text-align: left;
}
.text-card-big {
  font-size: 20px;
  text-align: left;
  margin-top: 5px;
  margin-bottom: 5px;
}
.grid-content-card {
  background: #f8f7f7;
  border-radius: 8px;
  min-height: 36px;
  padding-left: 30px;
  padding-right: 30px;
  padding-bottom: 20px;
  padding-top: 20px;
  margin-top: 8px;
}

img{
  /*设置图片宽度和浏览器宽度一致*/
  width: auto;
  height: 100%;
  border-radius:10px;
}
.img{
  margin-left: 10px;
  margin-bottom: 10px;
  margin-top: 5px;
  border: 1px solid #FFFFFF;
  float: left;
  width: 22%;
  position:relative;
  display: inline-block;
}
.img:hover{
  border: 1px solid #777;
}
.zhibofengmian{
  width: 100%;
  height: auto;
}
.desc{

  margin-bottom:5%;
  padding: 5%;
  text-align: center;
}
.headimg{
  position:relative;
  top:-5px;
  width:20%;
  float: left;
}
.guankanrenshu{
   color:#FFFFFF;
   position:absolute;
   left:-15px;
   top:50px;
   float:right;
   transform: scale(0.5)
 }
.小窗用户名 {
  position:relative;
  top:-5px;
  font-size: xx-small;
  left:-10px;
}
.小窗房间位置 {
  width:150%;
  position:relative;
  top:-10px;
  left:-25px;
  font-size: 13px;
  transform: scale(0.6);
}
.大窗主题 {
  position:relative;
  left:20px;
  top:20px;
  font-size: 16px;
}
.大窗内容 {
  position:relative;
  top:30px;
  font-size: x-small;
  left:30px;
  text-align: left;
}
.开播时间{
  position:relative;
  top:35px;
  left:130px;
  font-size: 16px;
  transform: scale(0.6);
  color:#888888;
  text-align: right;
}
.文本框-无间距 {
  position:relative;
  background: #ffffff;
  border-radius: 8px;
  height:100px;
  padding: 20px;
}
</style>
